import React, { Component } from 'react';
import { Form, Row, Col, Input, Button, message } from 'antd';
import style from './Setting.less';
const FormItem = Form.Item;

class MySetting extends Component {

  state = {
    isPwdShow: false
  }

  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        this.props.handleMyPwdChange(values);
      } else {
        message.error('请按要求填写表单', 3);
        console.log('err', err);
      }
    });
  }

  checkPwd = (rule, value, callback) => {
    if (!value || value.length < 6) {
      callback('新密码需超过6个字符');
    } else {
      callback();
    }
  }

  showPwd = () => {
    this.setState({
      isPwdShow: !this.state.isPwdShow
    })
  }

  render() {
    const formItemLayout = {
      labelCol: { span: 4 },
      wrapperCol: { span: 16 },
    };
    const tailFormItemLayout = {
      wrapperCol: {
        span: 12,
        offset: 4,
      },
    };
    const { isPwdShow } = this.state;
    const { getFieldDecorator } = this.props.form;
    return (
      <div className={style.setting_wrap}>
        <Row>
          <Col span={12}>
            <Form layout="horizontal" onSubmit={this.handleSubmit}>
              <FormItem
                {...formItemLayout}
                label="原密码"
                hasFeedback
              >
                <Row gutter={8}>
                  <Col span={20}>
                    {getFieldDecorator('oldPwd', {
                      rules: [{
                        required: true, message: '要换新密码就不能忘了原密码哦'
                      }],
                    })(
                      <Input type="password" />
                    )}
                  </Col>
                </Row>
              </FormItem>
              

              <FormItem
                {...formItemLayout}
                label="新密码"
                hasFeedback
              >
                <Row gutter={8}>
                  <Col span={20}>
                    {getFieldDecorator('newPwd', {
                      rules: [{
                        validator: this.checkPwd,
                        required: true,
                      }],
                    })(
                      isPwdShow
                      ? <Input type="text" />
                      : <Input type="password" />
                    )}
                  </Col>

                  <Col span={4}>
                    <Button onClick={this.showPwd}>{isPwdShow ? '隐藏' : '显示'}</Button>
                  </Col>
                </Row>
              </FormItem>


              <FormItem {...tailFormItemLayout}>
                <Button type="primary" htmlType="submit" size="large">修改密码</Button>
              </FormItem>
            </Form>
          </Col>
        </Row>
      </div>
    );
  }
}

const MySettingForm = Form.create()(MySetting);

export default MySettingForm;